<template>
  <!-- 对v-model进行拆解 拆解为:value和@change的形式 实现父子组件之间的数据交互 -->
  <el-select :value="value" @change="$emit('input', $event)" placeholder="请选择学院">
    <!-- v-for动态渲染option key为学院id label为学院名 value为学院id -->
    <el-option v-for="item in options" :key="item.id" :label="item.college" :value="item.id" />
  </el-select>
</template>

<script>
import { getCollegeList } from '@/api/college'

export default {
  name: 'CollegeSelect', // 选择学院组件
  props: {
    value: [Number, String]
  },
  async created () {
    this.getCollegeList() // 组件创建后获取全部专业数据
  },
  data () {
    return {
      options: [] // options内对象的格式为{id:学院号,college:专业名}
    }
  },
  methods: {
    // 获取全部专业数据
    async getCollegeList () {
      const { data: { data } } = await getCollegeList()
      this.options = data
    }
  }
}
</script>
